//导入基础库，核心模块
import React, { Component } from 'react';
//reactDOM 处理dom用的，document object model 相当于一个标签
import ReactDOM from 'react-dom/client';



const root = ReactDOM.createRoot(
  //获取id为root的标签
  document.getElementById('root') as HTMLElement
);

//一个页面必须一个根组件
function App(){
  return <>
    <h1>虚拟DOM</h1>
    <div>一个html标签就是一个dom</div>
    <div>虚拟dom是通过js对象描述的标签,是假的dom，html标签</div>
  </>
}

function Bpp(){
  //创建虚拟dom，就是通过对象描述一个dom元素，
  //为什么要用虚拟dom呢？ 因为可以减少真实dom的操作，提升性能
  //react更新算法 
  //diff:对比新老DOM找出差异，只更新变化的地方，，并尽可能减少对真实 DOM 的操作，做到局部更新，提升性能
  //fiber:

  return React.createElement('h1',{id:'title'},['哈哈哈哈哈哈',
    React.createElement('a',{href:"https://baidu.com"},'点击打开百度')
  ])
  //相当与创建一个h1标签，id为title，内容是哈哈哈哈哈哈
  // return <h1 id='title'>哈哈哈哈哈哈</h1>
}


//将app组件渲染id为root的标签内
root.render(
  <Bpp/>
);

